<!-- 基本属性 -->
<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="9">
                <el-form-item label="屏幕数量" prop="indexId" class="basic-set" label-width="100px"> 
                    <el-select v-model="editorForm.num" placeholder="请选择屏幕数量" @change="doNumChange">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-row style="height:20px"></el-row>
                <el-form-item label="屏幕名称" prop="mac" class="basic-set" label-width="100px" v-for="(i, index) in editorForm.screen" :key="index">
                    <el-input v-model="editorForm.screen[index].name" placeholder="请输入屏幕名称" maxlength="12" autocomplete="off" :show-word-limit="false" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="15">
                <el-form-item label="所属标签" prop="indexId" class="basic-set" label-width="100px">
                    <el-select v-model="editorForm.tag" placeholder="请选择标签">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-row style="height:20px"></el-row>
                <el-row v-for="(i, index) in editorForm.screen" :key="index">
                    <el-col :span="6">
                        <el-form-item label="X" label-width="30px">
                            <el-input v-model="editorForm.screen[index].x" autocomplete="off" clearable style="width:80px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="Y" label-width="30px">
                            <el-input v-model="editorForm.screen[index].y" autocomplete="off" style="width:80px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="W" label-width="30px">
                            <el-input v-model="editorForm.screen[index].w" autocomplete="off" style="width:80px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="H" label-width="30px">
                            <el-input v-model="editorForm.screen[index].h" autocomplete="off" style="width:80px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "VirtualScreen",
    data() {
        return {
            num:[],
        }
    },
    props: {
        editorForm: {
            default:{}
        }
    },
    methods:{
        doNumChange(data){
            this.editorForm.screen = [];
            for(var i = 0;i<data;i++)
            {
                this.editorForm.screen.push({})
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.basic-set {
    ::v-deep .el-form-item__content {
        width: 180px;
    }
    ::v-deep .el-select {
        width: 180px;
    }
}
</style>